<template>
	<view class="whitePage">
		<!-- 搜索 -->
		<view class="flex pad20" style="background: #fff;">
			<u-search
				borderColor="#FE5E10"
				shape="round"
				bgColor="#fff"
				height="70rpx"
				placeholder="输入用户ID"
				:showAction="false"
				:inputStyle="{'padding-right': '95rpx'}"
				type="number"
				v-model="request.keyword"
			/>
			<view class="searchBtn" @click="search">搜索</view>
		</view>
		<!-- 全选 -->
		<view class="pad20" @click="checkAllFun">全选/反选</view>
		<!-- 列表数据 -->
		<u-checkbox-group v-model="checkboxValue" placement="column">
			<view v-for="(item, index) in list" :key="index" class="u-border-bottom flex pad20">
				<u-checkbox :customStyle="{ marginBottom: '8px'}" :name="item.sign" />
				<u-avatar :src="item.avatar" size="150rpx" />
				<view class="info">
					<text>{{ item.nickName }}</text>
					<view>手机号：{{ item.mobile }}</view>
					<view>ID：{{ item.sign }}</view>
				</view>
				<u-icon name="arrow-right" color="rgba(0,0,0,0.6)" size="32rpx" :bold="true" />
			</view>
		</u-checkbox-group>
		<!-- 空数据 -->
		<u-empty v-if="!list.length" mode="list" text="暂无数据..." />
		<!-- 底部按钮 -->
		<view class="fixBottomBtn" @click="confirm">确定</view>
	</view>
</template>

<script>
	import { userList, addGroupingUser } from "@/api/store.js"
	export default {
		data() {
			return {
				list: [],
				sign: '',
				checkboxValue: [],
				allState: false,
				timer: null,
				totalPages: 1,
				request: {
					pageSize: 10,
					pageNum: 1,
					keyword: ''
				}
			}
		},
		onLoad(e) {
			this.sign = e.sign ?? ''
			this.getList()
		},
		onReachBottom() {
			this.timer && clearTimeout(this.timer);
			this.timer = setTimeout(() => this.getList(), 500);
		},
		methods: {
			// 全选
			checkAllFun() {
				this.allState = !this.allState
				this.checkboxValue = this.allState ? this.list.map(v => v.sign) : []
			},
			/* 重置请求 */
			search() {
				this.request.pageNum = 1
				this.list = []
				this.totalPages = 1
				this.getList()
			},
			// 获取列表数据
			getList() {
				if(this.request.pageNum > this.totalPages) return
				userList(this.request).then(res => {
					this.list = [...this.list, ...res.rows]
					this.totalPages = res.pages
					this.request.pageNum++
				})
			},
			// 提交数据
			confirm() {
				if(!this.checkboxValue.length) {
					uni.showToast({
						title: "请勾选中用户",
						icon: "error"
					})
					return
				}
				const userSign = this.checkboxValue.join(",")
				addGroupingUser({
					userSign,
					doctorSign: this.sign,
				}).then(res => uni.navigateBack())
			}
		}
	}
</script>

<style lang="scss" scoped>
.whitePage {
	padding-bottom: 120rpx;
}
::v-deep .u-avatar {
	margin: 0 30rpx 0 20rpx;
}
.info {
	flex: 1;
	text {
		font-size: 32rpx;
	}
	view {
		color: rgba(0, 0, 0, 0.6);
		font-size: 22rpx;
		margin-top: 10rpx;
	}
}
</style>
